<ng-container *ngIf="loading">
  <div class="tw-flex tw-items-center tw-justify-center">
    <i class="bwi bwi-spinner bwi-spin bwi-3x" aria-hidden="true"></i>
  </div>
</ng-container>

<ng-container *ngIf="!loading">
  <div class="tw-text-center">
    <ng-container *ngIf="flow === Flow.StandardAuthRequest">
      <p *ngIf="clientType !== ClientType.Web">
        {{ "notificationSentDevicePart1" | i18n }}
        <a
          bitLink
          linkType="primary"
          class="tw-cursor-pointer"
          [href]="deviceManagementUrl"
          target="_blank"
          rel="noreferrer"
          >{{ "notificationSentDeviceAnchor" | i18n }}</a
        >. {{ "notificationSentDevicePart2" | i18n }}
      </p>
      <p *ngIf="clientType === ClientType.Web">
        {{ "notificationSentDeviceComplete" | i18n }}
      </p>

      <div class="tw-font-semibold">{{ "fingerprintPhraseHeader" | i18n }}</div>
      <code class="tw-text-code">{{ fingerprintPhrase }}</code>

      <button
        *ngIf="showResendNotification"
        type="button"
        bitButton
        block
        buttonType="secondary"
        class="tw-mt-4"
        (click)="handleNewStandardAuthRequestLogin()"
      >
        {{ "resendNotification" | i18n }}
      </button>

      <div *ngIf="clientType !== ClientType.Browser" class="tw-mt-4">
        <span>{{ "needAnotherOptionV1" | i18n }}</span
        >&nbsp;
        <a [routerLink]="backToRoute" bitLink linkType="primary">{{
          "viewAllLogInOptions" | i18n
        }}</a>
      </div>
    </ng-container>

    <ng-container *ngIf="flow === Flow.AdminAuthRequest">
      <p>{{ "youWillBeNotifiedOnceTheRequestIsApproved" | i18n }}</p>

      <div class="tw-font-semibold">{{ "fingerprintPhraseHeader" | i18n }}</div>
      <code class="tw-text-code">{{ fingerprintPhrase }}</code>

      <div class="tw-mt-4">
        <span>{{ "troubleLoggingIn" | i18n }}</span
        >&nbsp;
        <a [routerLink]="backToRoute" bitLink linkType="primary">{{
          "viewAllLogInOptions" | i18n
        }}</a>
      </div>
    </ng-container>
  </div>
</ng-container>
